<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品牌管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }
        .btn {
            padding: 8px 16px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .btn-primary {
            background-color: #007bff;
            color: white;
        }
        .btn-primary:hover {
            background-color: #0056b3;
        }
        .btn-success {
            background-color: #28a745;
            color: white;
        }
        .btn-success:hover {
            background-color: #218838;
        }
        .btn-warning {
            background-color: #ffc107;
            color: #212529;
        }
        .btn-warning:hover {
            background-color: #e0a800;
        }
        .btn-danger {
            background-color: #dc3545;
            color: white;
        }
        .btn-danger:hover {
            background-color: #c82333;
        }
        .btn-info {
            background-color: #17a2b8;
            color: white;
        }
        .btn-info:hover {
            background-color: #138496;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 12px;
            text-align: center;
            border: 1px solid #ddd;
        }
        th {
            background-color: #007bff;
            color: white;
            font-weight: bold;
        }
        tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        tr:hover {
            background-color: #e9ecef;
        }
        .form-container {
            margin-top: 20px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 4px;
            display: none;
        }
        .form-container.active {
            display: block;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #333;
        }
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        .form-group textarea {
            height: 80px;
            resize: vertical;
        }
        .form-actions {
            margin-top: 15px;
            text-align: right;
        }
        .message {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            display: none;
        }
        .message.success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .message.error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .message.show {
            display: block;
        }
        .status-enabled {
            color: #28a745;
            font-weight: bold;
        }
        .status-disabled {
            color: #dc3545;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>品牌管理系统</h1>

    <!-- 消息提示 -->
    <div id="message" class="message"></div>

    <!-- 操作按钮 -->
    <div>
        <button class="btn btn-primary" @click="loadBrands">刷新列表</button>
        <button class="btn btn-success" @click="showAddForm">新增品牌</button>
    </div>

    <!-- 品牌列表表格 -->
    <table v-if="brandList.length > 0">
        <thead>
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(brand, index) in brandList" :key="brand.id">
            <td>{{ index + 1 }}</td>
            <td>{{ brand.brandname }}</td>
            <td>{{ brand.companyname }}</td>
            <td>{{ brand.ordered }}</td>
            <td>{{ brand.description }}</td>
            <td>
                        <span :class="brand.status == 1 ? 'status-enabled' : 'status-disabled'">
                            {{ brand.status == 1 ? '启用' : '禁用' }}
                        </span>
            </td>
            <td>
                <button class="btn btn-info" @click="findById(brand.id)">查看</button>
                <button class="btn btn-warning" @click="showEditForm(brand)">编辑</button>
                <button class="btn btn-danger" @click="deleteBrand(brand.id)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>



    <div v-else style="text-align: center; padding: 20px; color: #999;">
        暂无数据，请点击"新增品牌"添加数据
    </div>

    <!-- 新增/编辑表单 -->
    <div id="formContainer" class="form-container" :class="{ active: showForm }">
        <h3 style="margin-bottom: 15px;">{{ isEdit ? '编辑品牌' : '新增品牌' }}</h3>
        <form @submit.prevent="submitForm">
            <div class="form-group">
                <label>品牌名称：</label>
                <input type="text" v-model="formData.brandname" required />
            </div>
            <div class="form-group">
                <label>企业名称：</label>
                <input type="text" v-model="formData.companyname" required />
            </div>
            <div class="form-group">
                <label>排序：</label>
                <input type="number" v-model.number="formData.ordered" required />
            </div>
            <div class="form-group">
                <label>品牌介绍：</label>
                <textarea v-model="formData.description"></textarea>
            </div>
            <div class="form-group">
                <label>状态：</label>
                <select v-model.number="formData.status" required>
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                </select>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-success">{{ isEdit ? '更新' : '保存' }}</button>
                <button type="button" class="btn btn-primary" @click="hideForm">取消</button>
            </div>
        </form>
    </div>
</div>

<!-- 引入 Vue 3 和 axios -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    const { createApp } = Vue;

    createApp({
        data() {
            return {
                brandList: [],
                showForm: false,
                isEdit: false,
                formData: {
                    id: null,
                    brandname: '',
                    companyname: '',
                    ordered: 0,
                    description: '',
                    status: 1
                },
                page: {
                    current: 1,    // 当前页码
                    size: 5,       // 每页条数
                    total: 0       // 总记录数
                }
            }
        },
        mounted() {
            // 页面加载时自动加载品牌列表
            this.loadBrands();
        },
        methods: {
            // 显示消息提示
            showMessage(msg, type = 'success') {
                const messageEl = document.getElementById('message');
                messageEl.textContent = msg;
                messageEl.className = `message ${type} show`;
                setTimeout(() => {
                    messageEl.classList.remove('show');
                }, 3000);
            },

            // 加载所有品牌列表
            loadBrands() {
                axios.get("http://localhost:8080/brand")
                    .then(resp => {
                        // Controller 返回的是 result 对象，需要访问 resp.data.data
                        const result = resp.data;
                        if (result.code === 20000 || result.code === 20011) { // 根据你的 code 常量调整
                            this.brandList = result.data || [];
                            this.showMessage('加载成功！', 'success');
                        } else {
                            this.showMessage(result.msg || '加载失败', 'error');
                        }
                    })
                    .catch(err => {
                        console.error('加载失败：', err);
                        this.showMessage('加载失败：' + (err.response?.data?.msg || err.message), 'error');
                    });
            },

            // 根据ID查询品牌
            findById(id) {
                // 确保 id 是整数类型
                const brandId = parseInt(id);
                if (isNaN(brandId)) {
                    this.showMessage('无效的品牌ID', 'error');
                    return;
                }
                axios.get("http://localhost:8080/brand/" + brandId)
                    .then(resp => {
                        const result = resp.data;
                        if (result.code === 20000 || result.code === 20011) {
                            const brand = result.data;
                            alert('品牌详情：\n品牌名称：' + brand.brandname + '\n企业名称：' + brand.companyname + '\n排序：' + brand.ordered + '\n介绍：' + brand.description + '\n状态：' + (brand.status == 1 ? '启用' : '禁用'));
                        } else {
                            this.showMessage(result.msg || '查询失败', 'error');
                        }
                    })
                    .catch(err => {
                        console.error('查询失败：', err);
                        this.showMessage('查询失败：' + (err.response?.data?.msg || err.message), 'error');
                    });
            },

            // 显示新增表单
            showAddForm() {
                this.isEdit = false;
                this.formData = {
                    id: null,
                    brandname: '',
                    companyname: '',
                    ordered: 0,
                    description: '',
                    status: 1
                };
                this.showForm = true;
            },

            // 显示编辑表单
            showEditForm(brand) {
                this.isEdit = true;
                this.formData = {
                    id: brand.id,
                    brandname: brand.brandname,
                    companyname: brand.companyname,
                    ordered: brand.ordered,
                    description: brand.description,
                    status: brand.status
                };
                this.showForm = true;
            },

            // 隐藏表单
            hideForm() {
                this.showForm = false;
            },

            // 提交表单（新增或更新）
            submitForm() {
                if (this.isEdit) {
                    // 更新品牌
                    axios.put("http://localhost:8080/brand", this.formData)
                        .then(resp => {
                            const result = resp.data;
                            if (result.code === 20000 || result.code === 20011) {
                                this.showMessage('更新成功！', 'success');
                                this.hideForm();
                                this.loadBrands(); // 刷新列表
                            } else {
                                this.showMessage(result.msg || '更新失败', 'error');
                            }
                        })
                        .catch(err => {
                            console.error('更新失败：', err);
                            this.showMessage('更新失败：' + (err.response?.data?.msg || err.message), 'error');
                        });
                } else {
                    // 新增品牌
                    axios.post("http://localhost:8080/brand", this.formData)
                        .then(resp => {
                            const result = resp.data;
                            if (result.code === 20000 || result.code === 20011) {
                                this.showMessage('保存成功！', 'success');
                                this.hideForm();
                                this.loadBrands(); // 刷新列表
                            } else {
                                this.showMessage(result.msg || '保存失败', 'error');
                            }
                        })
                        .catch(err => {
                            console.error('保存失败：', err);
                            this.showMessage('保存失败：' + (err.response?.data?.msg || err.message), 'error');
                        });
                }
            },

            // 删除品牌
            deleteBrand(id) {
                if (!confirm('确定要删除该品牌吗？')) {
                    return;
                }
                // 确保 id 是整数类型
                const brandId = parseInt(id);
                if (isNaN(brandId)) {
                    this.showMessage('无效的品牌ID', 'error');
                    return;
                }
                axios.delete("http://localhost:8080/brand/" + brandId)
                    .then(resp => {
                        const result = resp.data;
                        if (result.code === 20000 || result.code === 20011) {
                            this.showMessage('删除成功！', 'success');
                            this.loadBrands(); // 刷新列表
                        } else {
                            this.showMessage(result.msg || '删除失败', 'error');
                        }
                    })
                    .catch(err => {
                        console.error('删除失败：', err);
                        this.showMessage('删除失败：' + (err.response?.data?.msg || err.message), 'error');
                    });
            }
        }
    }).mount('.container');
</script>
</body>
</html>